<template>
  <div>
    <header class="talk" @click="$router.replace('/')">
      <i class="iconfont icon-left"></i>
      <span>{{to.username||to.mobilePhoneNumber}}</span>
    </header>
    <div class="lists" id="lists">
      <list-item :key="key" :isMe="item.from!=$route.params.id" :from="item.from==$route.params.id?to:from"
        v-for="(item,key) in messages" :content="item.text"></list-item>
    </div>
    <div class="bottom">
      <i class="iconfont icon-icon_edit"></i>
      <input v-model="talk_content" id="talk_content"></input>
      <button class="sendBtn" @click="sendContent">发送</button>
    </div>
  </div>
</template>
<script>
  import listItem from "./listItem";
  import {
    sendContent,
    getMessages,
    get_user_information_get_duifang_information
  } from "./service";
  export default {
    components: {
      listItem
    },
    async mounted() {
      var toId = this.$route.params.id;
      var messages = await getMessages(toId);
      /* get user information get duifang information */
      var { to, from } = await get_user_information_get_duifang_information(
        toId
      ).catch(console.error);
      this.to = to;
      this.from = from;
      this.messages = messages;
      document.title = to.mobilePhoneNumber;
      setTimeout(() => {
        $("#talk_content").val("");
        $("html,body").animate({ scrollTop: $("#lists").height() + 100 }, 500);
      }, 300);
    },
    methods: {
      callbackMessage(messgae) {
        var toId = this.$route.params.id;
        this.messages.push({
          from: messgae.from,
          text: messgae.text
        });
        setTimeout(() => {
          $("#talk_content").val("");
          $("html,body").animate({ scrollTop: $("#lists").height() + 100 }, 500);
        }, 300);
      },
      sendContent() {
        var toId = this.$route.params.id;
        if (this.talk_content) {
          sendContent(toId, this.talk_content, this.callbackMessage);
        }
      }
    },
    data() {
      return {
        messages: [],
        talk_content: "",
        to: {},
        from: {}
      };
    }
  };
</script>
<style lang="less" scoped>
  .lists {
    margin-bottom: 100px;
  }

  .bottom {
    padding-left: 10px;
    padding-right: 10px;
    width: 100%;
    display: flex;
    position: fixed;
    bottom: 0;
    height: 60px;
    border-top: 1px solid #eeee;
    align-items: center;

    .iconfont {
      font-size: 20px;
    }

    input {
      border: none;
      background: #eee;
      border-radius: 10px;
      flex: 1;
      padding-left: 10px;
      padding-right: 10px;
      margin-left: 10px;
      margin-right: 10px;
    }

    .sendBtn {
      background: #fff;
      border: none;
    }
  }

  header {
    padding-left: 15px;
    padding-right: 15px;
    height: 60px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;
    box-shadow: 1px 1px 1px #eee;

    span {
      margin-left: 10px;
    }
  }
</style>